<template>
	<div>
		<Form ref="form" :model="formData" label-position="top" :rules="rules">
			<Tabs>
				<TabPane label="供应商编辑">
					<FormDescItem label="供应商名称" desc="填写供应商名称，可是供应商简称，不可重复且不能为空">
						<Input />
					</FormDescItem>
					<FormDescItem label="供应商编号" desc="填写供应商编号，如不填，系统默认自动生成">
						<Input />
					</FormDescItem>
					<FormDescItem label="供应商检索字母" desc="选择供应商检索字母，在筛选供应商时可以直接使用供应商字母进行检索">
						<Select filterable>
					        <Option v-for="item in letters" :key="item" :value="item">{{ item }}</Option>
					    </Select>
					</FormDescItem>
					<FormDescItem label="供应商地区" desc="选择供应商所属地区，如有多个地区，请选择供应商主要地区">
						<Cascader :data="areas"></Cascader>
					</FormDescItem>
					<FormDescItem label="供应商详细地址" desc="填写供应商详细地址，此项可不填">
						<Input type="textarea" />
					</FormDescItem>
					<FormDescItem label="供应商联系人" desc="填写供应商联系人姓名，此项可不填">
						<Input />
					</FormDescItem>
					<FormDescItem label="供应商联系人电话" desc="填写供应商联系人电话，可填写座机或手机，此项可不填">
						<Input />
					</FormDescItem>
				</TabPane>
			</Tabs>
			<Tabs>
				<TabPane label="银行账户">
					<FormDescItem label="账户名称" desc="填写供应商开户银行账户全称">
						<Input />
					</FormDescItem>
					<FormDescItem label="银行账号" desc="填写供应商开户银行账号信息">
						<Input />
					</FormDescItem>
					<FormDescItem label="开户银行" desc="选择供应商开户银行">
						<Select filterable>
					        <Option v-for="item in letters" :key="item" :value="item">{{ item }}</Option>
					    </Select>
					</FormDescItem>
					<FormDescItem label="开户地区" desc="选择供应商开户银行所在地区">
						<Cascader :data="areas"></Cascader>
					</FormDescItem>
					<FormDescItem label="支行名称" desc="填写供应商开户银行支行名称">
						<Input />
					</FormDescItem>
					<FormDescItem label="企业税号" desc="填写供应商税号，此项可不填">
						<Input />
					</FormDescItem>
				</TabPane>
			</Tabs>
			<Tabs>
				<TabPane label="结算信息">
					<FormDescItem label="经营方式" desc="设置供应商经营方式，经销是根据采购订单、采购入库单的采购进价结算；联营是根据结算周期内销售商品按比例提成">
						<RadioGroup>
					        <Radio label="经销"></Radio>
					        <Radio label="联营"></Radio>
					    </RadioGroup>
					</FormDescItem>
				</TabPane>
			</Tabs>
		</Form>
		<FooterBar>
			<div style="text-align: center;">
				<Button @click="handleBack">返回列表</Button>
				<Button type="primary" :loading="committing" @click="handleSubmit">保存设置</Button>
			</div>
		</FooterBar>
	</div>
</template>

<script>
import Util from '@/libs/util.js';
import FormDescItem from '@/components/form/FormDescItem.vue';
import FooterBar from '@/components/FooterBar.vue';
export default {
	components: {
		FormDescItem,
		FooterBar
	},
	data() {
		return {
			committing: false,
			letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
			formData: {
				name: '',
				money: [50, 100, 150, 200]
			},
			rules: {
				
			}
		}
	},
	computed: {
		areas () {
            return this.$store.state.app.areas;
        }
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			
		},
		handleSubmit() {
			if(this.committing) return false;
			this.$refs.form.validate(valid => {
                if(valid) {
                	
                }
            });
		},
		handleBack() {
			this.$router.back();
		}
	}
}
</script>